<template>
	<view class="Withdrawal">
		<Hearder :name="'提现'" :txtype="type"></Hearder>
		<view v-if="JSON.stringify(userinfo) !='{}'">
			<view class="topbox" v-if="type==1">
				<view>可提现{{ptbname}}</view>
				<view>{{userinfo.account}}</view>
			</view>
			<view class="topbox" v-if="type==2">
				<view>可提现门票</view>
				<view>{{userinfo.member_token}}</view>
			</view>
			<view class="tixianmoney bgbottom">
				<view>
					<input :placeholder="type==1?'请输入提现'+ptbname:'请输入门票数量'" placeholder-style="color:#ccc" v-model="amount"/>
				</view>
				<view @click="total">全部</view>
			</view>
			<view class="list-con bgbottom">
				<view class="itemList">
					<view>姓名</view>
					<input type="text" placeholder="输入持卡人姓名" placeholder-style="color:#999" v-model="nickname"/>
				</view>
				<view class="itemList">
					<view>账号</view>
					<input type="text" placeholder="银行卡账号" placeholder-style="color:#999" v-model="account_number"/>
				</view>
				<view class="itemList">
					<view>开户行</view>
					<input type="text" placeholder="开户行名称" placeholder-style="color:#999" v-model="bank_name"/>
				</view>
				<view class="itemList">
					<view>手机号</view>
					<input type="text" placeholder="输入手机号" placeholder-style="color:#999" v-model="mobile"/>
				</view>
				<view class="itemList yzm">
					<view>验证码</view>
					<input type="text" placeholder="请输入验证码" placeholder-style="color:#999" v-model="ver_code"/>
					<text class="getcode" @click="getCode">{{initcode}}</text>
				</view>
			</view>
			<view class="shouxufei bgbottom">
				<view>预计手续费({{type==1?userinfo.withdrawal.handling_fee:userinfo.withdrawal.token_handling_fee}}%)</view>
				<view v-if="type==1">￥{{(amount * (userinfo.withdrawal.handling_fee / 100)).toFixed(2)}}</view>
				<view v-if="type==2">￥{{(amount * userinfo.withdrawal.token_price * (userinfo.withdrawal.token_handling_fee / 100)).toFixed(2)}}</view>
			</view>
			<view class="tixian" @click="withdraw()">提现</view>
			<view class="tixianrule">
				<view class="rule-title">提现规则</view>
				<view class="rule-detail">{{withdrawal_rules}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				initcode:'发送验证码',
				second:60,
				amount:'',
				nickname:'',
				account_number:'',
				mobile:'',
				ver_code:'',
				bank_name:'',
				userinfo:{},
				totalprice:0,
				type:1,
				withdrawal_rules:'',
				ptbname:''
			}
		},
		onShow() {
			this.getMemberDetails()
		},
		onLoad(options) {
			this.type = options.type
			if(options.ptbname){
				this.ptbname = options.ptbname
			}
			this.request('/index/getAgreement').then(res => {
				if(res.data.code==1){
					  this.withdrawal_rules=res.data.data.withdrawal_rules
				}
			})
		},
		methods:{
			// 获取个人信息
			getMemberDetails(){
				this.request('/member/getMemberDetails').then(res=>{
					if(res.data.code == 1){
						this.userinfo = res.data.data
					}
				})
			},
			// 梭哈
			total(){
				if(this.type==1){
					this.amount = this.userinfo.account
				}else if(this.type==2){
					this.amount = this.userinfo.member_token
				}
			},
			// 发送验证码
			getCode(){
				var that=this
				if(this.initcode=='发送验证码'){
					this.request('/v1/sms',{phone: this.mobile},'GET').then(res => {
						if(res.data.code==1){
							 this.$tip(res.data.msg);
							 var interval = setInterval(() => {
							    --this.second
							    that.initcode=this.second+'s'
							 }, 1000)
							 setTimeout(() => {
							    clearInterval(interval)
							    this.initcode='发送验证码'
								this.second=60
							 }, 60000)
						}else{
							this.$tip(res.data.msg);
						}
					})
				}
			},
			// 提现
			withdraw(){
				this.request('/member/withdraw',{
					amount:this.amount,
					nickname:this.nickname,
					bank_name:this.bank_name,
					account_number:this.account_number,
					mobile:this.mobile,
					ver_code:this.ver_code,
					apply_type:this.type
				}).then(res=>{
					if(res.data.code == 1){
						this.$tip(res.data.msg)
						this.amount=''
						this.nickname=''
						this.account_number=''
						this.mobile=''
						this.ver_code=''
						this.bank_name=''
						this.initcode='发送验证码'
						this.second=60
						this.getMemberDetails()
					}else{
						this.$tip(res.data.data)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.Withdrawal{
		.topbox{
			overflow: hidden;
			height: 212rpx;
			background: $uni-item-color;
			view{
				text-align: center;
				&:first-of-type{
					font-size: 26rpx;
					color: rgba(255,255,255,.8);
					margin-top: 46rpx;
				}
				&:last-of-type{
					font-size: 46rpx;
					color: #fff;
					font-weight: 800;
					margin-top: 20rpx;
				}
			}
		}
		.tixianmoney{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 46rpx 4%;
			view{
				color: $uni-text-color;
				&:first-of-type{
					width: 80%;
					color: #323232;
					input{
						font-size: 34rpx;
					}
				}
			}
		}
		.list-con{
			padding: 0 3%;
			.itemList{
				display: flex;
				align-items: center;
				overflow: hidden;
				border-bottom: 1rpx solid $uni-background-color;
				height: 109rpx;
				&:last-of-type{
					border-bottom: none;
				}
				view{
					width: 18%;
				}
				input{
				  width: 82%;
				  height: 80%;
				  margin-top: 2rpx;
				}
				.getcode{
					width: 172rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					color: #F86E2A;
					border: 1rpx solid #F86E2A;
					border-radius: 50rpx;
					font-size: 26rpx;
				}
			}
			.yzm input{
				width: 58%;
			}
		}
		.shouxufei{
			display: flex;
			justify-content: space-between;
			padding: 40rpx 3%;
			view:last-of-type{
				color: $uni-text-color;
			}
		}
		.tixian{
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: $uni-item-color;
			margin: 43rpx 3% 0;
			color: #fff;
			border-radius: 88rpx;
		}
		.tixianrule{
			margin: 50rpx 3%;
			.rule-title{
				font-weight: 800;
				height: 32rpx;
				border-left: 4rpx solid $uni-item-color;
				line-height: 32rpx;
				padding-left: 20rpx;
			}
			.rule-detail{
				font-size: 28rpx;
				white-space: pre-wrap;
				margin-top: 20rpx;
			}
		}
	}
</style>